<template>
  <div class="mainControl">
    <VonCrumbs title="工站管理"></VonCrumbs>
    <div class="widget">
      <!--            <VonSelect v-model="detail.model" :options="workStationOptions"></VonSelect>-->
      <VonInput v-model="detail.value" width="260px" placeholder="搜索工站" @change="getWorkStationList"></VonInput>
    </div>
    <div class="tableContent">
      <VonTable :column="column" :tableData="tableData">
        <el-table-column slot="operation" label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editDevice(scope.row)" style="color: #1890ff">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </VonTable>
    </div>
    <VonDialog :title="type==1?'新增':'编辑'" @cancelResult="cancelResult" @commitResult='commitResult' :isShow_Popup="isShow_Popup">
      <div class="deviceForm" slot="content">
        <el-form ref="form" :model="form" label-width="48px">
          <el-form-item>
            <VonInput v-model="form.name" label="设备名称" width="460px"></VonInput>
          </el-form-item>
          <el-form-item>
            <VonInput v-model="form.plcip" label="IP地址" width="460px"></VonInput>
          </el-form-item>
        </el-form>
      </div>
    </VonDialog>
  </div>
</template>

<script>
import {
  getWorkStationListApi,
  workStationUpdate
} from "../../api/workStation/mainControl";
import { openLoading, closeLoading } from "../../common/prompt";
import { validateIP } from "../../common/index";
export default {
  name: "MaterialManage",
  data() {
    return {
      detail: {
        model: "",
        value: ""
      },
      tableData: [],
      column: [
        {
          align: "center",
          label: "工站名称",
          prop: "name",
          width: 280
        },
        {
          align: "center",
          label: "PLC地址",
          prop: "plcip"
        }
      ],
      isShow_Popup: false,
      form: {
        id: "",
        name: "",
        plcip: ""
      },
      type: 2
    };
  },
  methods: {
    cancelResult() {
      this.isShow_Popup = false;
    },
    commitResult() {
      let ApiMethod = "";
      if (this.type == 1) {
        ApiMethod = "";
      } else {
        ApiMethod = workStationUpdate;
      }
      if(!validateIP(this.form.plcip)){
        this.$message.error("请正确输入IP");
        return;
      }
      openLoading("处理中...");
      ApiMethod({ ...this.form }).then(res => {
        if (res.status == 200 || res.status == 204) {
          this.$message.success(this.type == 1 ? "新增成功" : "修改成功");
          this.getWorkStationList();
        } else {
          this.$message.error(this.type == 1 ? "新增失败" : "修改失败");
        }
      });
      this.isShow_Popup = false;
      this.form = {
        id: "",
        name: "",
        plcip: ""
      };
    },
    editDevice(row) {
      let { id, name, plcip } = row;
      this.form = {
        id,
        name,
        plcip
      };
      this.type = 2;
      this.isShow_Popup = true;
    },
    getWorkStationList() {
      let params = { name: this.detail.value };
      openLoading();
      getWorkStationListApi(params).then(res => {
        closeLoading();
        if (res.data && res.status == 200) {
          this.tableData = res.data;
        } else {
          this.$message.error("查询数据失败");
        }
      });
    }
  },
  created() {
    this.getWorkStationList();
  }
};
</script>

<style scoped lang="scss">
@import "../../style/mainControl";
</style>
